<template>
  <div class="banner">
    <img
      class="banner-item"
      v-for="item of list"
      :key="item._id"
      v-lazy="getImg(item.images.small)"
      alt=""
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import HomeApi from "@/apis/home";
import getImg from "@/utils/getImg";
export default defineComponent({
  setup() {
    const state = reactive({
      list: [],
    });
    const getBanner = async () => {
      const params = {
        page: 2,
        limit: 9,
      };
      let { object_list } = await HomeApi.getBanner(params);
      console.log(object_list);
      state.list = object_list;
    };
    onMounted(() => {
      getBanner();
    });
    return { ...toRefs(state), getImg };
  },
});
</script>

<style lang='scss' scoped>
.banner {
  white-space: nowrap;
  overflow-x: scroll;
  scroll-behavior: smooth;
  margin-top: 10px;
  &-item {
    width: 88px;
    height: 125px;
    margin: 0 5px;
  }
}
</style>
